<template>
  <div class="detail">
    <div class="content">货道: {{serialNum}}</div>
    <div class="content">
      <img :src="imageUrl" style="width: 200px" alt="">
    </div>
    <div class="content">名称: {{productName}}</div>
    <div class="content">价格: {{price}}元</div>
    <button @click="pay">立即支付</button>
  </div>
</template>
<script>
  export default {
    name: 'Index',
    data () {
      return {
        productName: '',
        imageUrl: '',
        price: '',
        serialNum: '',
        machineID: '',
        config: {
          appid: 'wxcfd3b759765ff7ee',
        },
        redirectUri: ''
      }
    },

    created() {

      let str = decodeURIComponent(location.href);
      let arr = str.split('?')[1].split('&');
      this.serialNum = arr[0].split('=')[1];
      this.imageUrl = arr[1].split('=')[1];
      this.price = arr[2].split('=')[1] / 100;
      this.productName = arr[3].split('=')[1];
      this.machineUid = arr[4].split('=')[1];
      this.code = arr[5].split('=')[1];
    },
    methods: {
      pay () {
        let api = 'http://manage.bandtechs.com/public/pay/wxPay/buy?';
        let key_value = `code=${this.code}&serialNum=${this.serialNum}&price=${this.price}&name=${this.productName}&machineUid=${this.machineUid}`;

        this.$http.get(api + key_value).then((res) => {
          let resData = res.data;
          if(resData.return_code == 'SUCCESS'){
            let wxReqBody = {
              "appId": resData.appId,     //公众号名称，由商户传入
              "timeStamp": `${resData.timeStamp}`,         //时间戳，自1970年以来的秒数
              "nonceStr": resData.nonceStr, //随机串
              "package": resData.package,
              "signType": resData.signType,         //微信签名方式：
              "paySign": resData.paySign //微信签名
            };
            this.weixinPay(wxReqBody);
          }
        });
      },
      weixinPay (parmse){
        if (typeof WeixinJSBridge == "undefined") {//微信浏览器内置对象。参考微信官方文档
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(parmse), false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(parmse));
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(parmse));
          }
        } else {
          //  alert("直接回调");
          this.onBridgeReady(parmse);
        }
      },
      /**
       * @method 支付费用方法
       * @param data:后台返回的支付对象,(详情微信公众号支付API中H5提交支付);
       */
      onBridgeReady (params){
        var vm = this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', params,
          function (res) {
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            if (res.err_msg == "get_brand_wcpay_request：ok") {

//              vm.$router.replace({path: '/medicalservice/orderdetail', query: {order_id: vm.order_id}});
            } else {
//              vm.$router.replace({path: '/medicalservice/orderdetail', query: {order_id: vm.order_id}});
            }
          }
        );
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
